// 配置登录注册页面
<template>
  <div id="auth">
    <!-- 注册页面 -->
    <template v-if="run">
      <nav-bar class="nav-bar" key="register">
        <div slot="left" class="back" @click="backClick">
          <img src="~assets/img/common/back.svg" alt />
        </div>
        <div slot="center">注册</div>
      </nav-bar>
      <!-- 表单 -->
      <div class="">
        <form-item @handleLogin="gotoLg" :type="run"></form-item>
      </div>
    </template>
    <!-- 登录页面 -->
    <template v-else>
      <nav-bar class="nav-bar">
        <div slot="left" class="back" @click="backClick">
          <img src="~assets/img/common/back.svg" alt />
        </div>
        <div slot="center">登录</div>
      </nav-bar>
      <div class="">
        <form-item @handleRegister="gotoRs" :type="run"></form-item>
      </div>
    </template>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";

import FormItem from "./childComps/FormItem";
export default {
  name: "Auth",
  components: {
    NavBar,
    FormItem,
  },
  data() {
    return {
      run: false,
    };
  },
  methods: {
    backClick() {
      this.run = !this.run;
      this.$router.go(-1);
    },
    gotoLg() {
      this.run = false;
      this.$router.push({
        path: "/auth",
        query: {
          run: "login",
        },
      });
    },
    gotoRs() {
      this.run = true;
      this.$router.push({
        path: "/auth",
        query: {
          run: "register",
        },
      });
    },
  },
  created() {
    // 获取路由传递过来的参数
    const { run } = this.$route.query;
    // 根据run的值来决定是登录还是注册
    if (run === "login") {
      this.run = false;
    } else {
      this.run = true;
    }
  },
};
</script>

<style scoped>
#auth {
  height: 100vh;
  position: relative;
  z-index: 9;
  background: url("../../assets/img/auth/auth.jpg") no-repeat center/100%;
}

.back img {
  margin-top: 12px;
}
.nav-bar {
  background-color: transparent;
  color: rgb(20, 19, 19);
}
</style>